<template>
	<div class="department" :class="{'add': type===0, 'edit': type===1}">
		<div class="section">
			<ul>
				<li>
					<label>
						<dl class="form-group-flex" :class="{'warn': $v.formData.name.$error}">
							<dd class="form-group-flex-item">部门名称</dd>
							<dd class="form-group-flex-item" >
								<input type="text" placeholder="必填" 
									v-model.trim="formData.name"
									@input="$v.formData.name.$touch()">
							</dd>
							<dd class="form-group-flex-item"><i class="icon-close" @click="clear('name')"></i></dd>
						</dl>
					</label>
				</li>
				<li>
					<label>
						<dl class="form-group-flex" :class="{'warn': $v.formData.sort.$error}">
							<dd class="form-group-flex-item">部门排序</dd>
							<dd class="form-group-flex-item">
								<input type="text" placeholder="选填(部门排序，1为最前)" 
									v-model.trim="formData.sort" 
									@input="$v.formData.sort.$touch()">
							</dd>
							<dd class="form-group-flex-item"><i class="icon-close" @click="clear('sort')"></i></dd>
						</dl>
					</label>
				</li>
			</ul>
		</div>
		<div class="footer" v-if="type===1">
			<button class="btn btn-submit" @click="update(formData)" v-if="isValid">完成</button>
			<button class="btn btn-submit unable" v-else>完成</button>
			<button class="btn btn-delete" @click="bus.$emit('confirmModal', true)">删除</button>
		</div>
		<div class="footer" v-else>
			<button class="btn btn-submit" @click="add(formData)" v-if="isValid">完成</button>
			<button class="btn btn-submit unable" v-else>完成</button>
		</div>

		<com-confirm 
			:title="'确定删除该部门？'" 
			:cancel="confirmCancel" 
			:sure="confirmSure" 
		>(部门内联系人会移到未划分部门内)</com-confirm>
	</div>
</template>

<script>

	import { required, numeric } from 'vuelidate/lib/validators'
	import ComConfirm from '@/components/comfirm';

	export default {

	  	name: 'department',

	  	components: {
	  		ComConfirm
	  	},

	  	data () {
		    return {
		    	type: 0, // 0：新增， 1：编辑
		    	formData: {},
		    	isValid: false
		    };
	  	},

	  	created () {
	  		this.type = this.$route.name === 'department_add' ? 0 : 1;
	  		this.init(this.type);
	  		if (this.type===0) {
	  			fxAPI.api('setAppTitle', {title: '添加子部门'});
	  		} else {
	  			fxAPI.api('setAppTitle', {title: '部门设置'});
	  		}
	  	},

	  	methods: {
	  		init (type) {
	  			if (type === 0) {
	  				this.formData = {
	  					action: 'add',
	  					parentId: this.$route.params.parentId,
	  					name: '',
	  					sort: ''
	  				}
	  			} else {
	  				this.getDepartmenDetail(this.$route.params.id).then(
	  					res => {
	  						this.formData = {
			  					action: 'update',
			  					departmentId: res.departmentId,
			  					parentId: res.pDepartmentId,
			  					name: res.departmentName,
			  					sort: res.departmentSort
			  				}
	  					}
	  				);
	  			}
	  		},

	  		getDepartmenDetail (departmentId) {
	  			return new Promise((resolve, reject) => {
	  				this.$http.post(this.api.eab, {
		  				module: 'department',
		  				action: 'batchGetDepartment',
		  				departmentIds: [departmentId]
		  			}).then(
		  				res => {
		  					if (res.body.result === 1) {
		  						resolve(res.body.data.list[0]);
		  					}
		  				}
		  			);
	  			});
	  		},

	  		clear (modelName) {
	  			this.formData[modelName] = '';
	  		},

	  		confirmCancel () {
	  			this.bus.$emit('confirmModal', false);
	  		},

	  		confirmSure () {
	  			this.bus.$emit('confirmModal', false);
	  			this.del(this.formData); 
	  		},

	  		/**
	  		 * 新增部门
	  		 * @param {Object} formData 新增部门表单数据
	  		 */
	  		add (formData) {
	  			this.$http.post(this.api.eab, {
	  				'module':'department',
					'action':'addDepartment',
					'pDepartmentId': formData.parentId,
					'departmentName': formData.name,
					'departmentSort': formData.sort,
					'createUserId': this.cache.userId
	  			}, {showLoading: true}).then(
	  				res => {
	  					if (res.body.result === 1) {
	  						this.$router.go(-1);
	  					}
	  				}
  				);
	  		},

	  		/**
	  		 * 更新部门信息
	  		 * @param  {Object} formData 更新部门表单数据
	  		 */
	  		update (formData) {
	  			this.$http.post(this.api.eab, {
	  				'module': 'department',
					'action': 'updateDepartment',
					'departmentId': formData.departmentId,
					'pDepartmentId': formData.parentId,
					'departmentName': formData.name,
					'departmentSort': formData.sort,
					'createUserId': this.cache.userId
	  			}, {showLoading: true}).then(
	  				res => {
	  					if (res.body.result === 1) {
	  						this.$router.go(-1);
	  					}
	  				}
	  			);
	  		},

	  		/**
	  		 * 删除部门
	  		 * @param  {Object} formData 删除部门表单数据
	  		 */
	  		del (formData) {
	  			this.$http.post(this.api.eab, {
	  				'module': 'department',
					'action': 'batchDeleteDepartment',
					'departmentIds': [formData.departmentId]
	  			}, {showLoading: true}).then(
	  				res => {
	  					if (res.body.result === 1) {
	  						this.$router.go(-1);
	  					}
	  				}
	  			);
	  		}
	  	},

	  	validations: {
          	formData: {
	          	name: {
	          		required
	          	},
	            sort: {
	              	numeric
	            }
          	},
          	validationGroup: ['formData']
        },

        watch: {
        	'$v.formData.name.$error' (a, b) {
        		if (a) 
        			this.$toasted.error('部门名称不能为空');
        	},
        	'$v.formData.sort.$error' (a, b) {
        		if (a) 
        			this.$toasted.error('部门排序只能为整数');
        	},
        	'$v.validationGroup': {
        		handler (a, b) {
        			this.isValid = !(a.$error||a.$invalid);
        		},
        		deep: true
        	}
        }
	};
</script>

<style lang="scss" scoped>
	@import '../scss/mixin.scss';
	.department{
		&.add{
			@include app-top-main-bottom(0, 110px);
		}
		&.edit{
			@include app-top-main-bottom(0, 220px);
		}
		
		
		ul{
			width: 100%;
			// padding-left: 20px;
			box-sizing: border-box;
			background: #fff;
			li{
				&:last-child{
					dd{
						&:after{
							border-bottom: none !important;
						}
					}
				}
			}
		}

		.form-group-flex{
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			width: 100%;
			height: 100px;
			line-height: 100px;
			font-size: 28px;
			padding-left: 20px;
			box-sizing: border-box;

			&.warn{
				background: #f5cfc9;
			}
			
			input{
				background: transparent;
			}

			&-item{
				position: relative;
				-webkit-box-flex: 1;
				    -ms-flex-positive: 1;
				        flex-grow: 1;
				height: 100%;
				text-align: left;
				@include text-ellipsis();
				@include border-1px(#dcdcdc);
			}
			&-item:first-child{
				-webkit-box-flex: 0;
				    -ms-flex-positive: 0;
				        flex-grow: 0;
				-ms-flex-preferred-size: 100px;
				    flex-basis: 130px;
				min-width: 130px;
				text-align: left;
			}
			&-item:nth-child(2){
				padding-left: 10px;
				box-sizing: border-box;
				input{
					width: 100%;
				}
			}
			&-item:last-child{
				-webkit-box-flex: 0;
				    -ms-flex-positive: 0;
				        flex-grow: 0;
				-ms-flex-preferred-size: 60px;
				    flex-basis: 60px;
				min-width: 60px;
				text-align:center;
			}
		}

		.btn{
			margin-top: 10px;
		}
	}
</style>